Guideline CMS Costum

I - Configurer son costum

⥅ [[https://]]

⥅ [[https://codimd.communecter.org/uploads/upload_020eb376dabac238e160f2f6a7a0e87f.png]]

A - Les infos générales de son costum

⥅ [[https://codimd.communecter.org/uploads/upload_1e304cf99087d99201aec330723cca3a.png]]

Un costum nait d’une organisation, d’un projet ou d’un événement qui souhaite développer son propre site qu’on appelle aussi CMS. Par défault, le costum a les informations de cette éléments : Logo, titre, infos pour les méta de référencement

B - Construction générale du site

⥅ [[https://codimd.communecter.org/uploads/upload_c000e34babb07c64eab494d0d9ef0fdd.png]]

• Pages : Définition et gestion de toutes les pages du site de l’accueil aux mentions légales

• [ ]Menus : vue compléte de la maquette du site et de ses menus Pour la construction d’un menu, allez directement à la section II "construction d’un menu"

• Element Ajoutable : Tous les elements à activer et définir que vous voudrez ajouter sur votre costum : les projets, les événements, les acteurs d’un territoire et bien d’autres encore…

C - Design global du site [ manda nicos]

⥅ [[https://codimd.communecter.org/uploads/upload_04af114b5ce5c42865ca35dcce16a6c3.png]]

• Habillage : style et configuration des loader, progress, menu(en haut ou à gauche), couleur general du site, police et contenu (titre,text,lien) du site
• Loader : les types d’animation pendant le chargement de la page
• Style css personnalisé : code css specifique du site

D - Réglages de la communauté

II - Création d’un menu [manda / nicoss]

III - Création d’une page

Sumurry : Créer une page et l’ajouter au menu, Afin d’y ajouter vos blocs, Et même utiliser un template de page qui génére un ensemble de bloc

A - Initialisation d’une page

A1 - Créer une page

A2 - Editer une page

A3 - Ajouter la page au menu

A4 - Restreindre l’accès à une page de mon costum

L’accès à une page peut être restreinte à ma communauté suivant le lien de l’utilisateur à mon organisation ou mon projet. On peut rendre accessible une page uniquement aux : [ ] membres de la communauté
[ ] administrateurs de la communauté [ ] Ou encore aux membres qui ont un rôle spécifique

⥅ [[https://codimd.communecter.org/uploads/upload_1cd420cac36e491ef5894f2cf381e1a0.png]]

B - Construire la page avec des blocs

B1 Créer une section

Pour utiliser les elements blocs CMS. Il faut:

• Cliquer sur le bouton plus

  ⥅ [[https://codimd.communecter.org/uploads/upload_4b39ec56d4bc1353b3e15125e86c099b.png]]

  sur une section ou sur le bouton "Ajouter un bloc" qui situé à gauche.
• Choisissez et faites gliser vers la page.
• Cliquez sur un élément pour ouvrir sa menu de configuration,
• Configurez selon vos besoin.

Voici une exemple d’une section qui contien de titre et de texte avec une photo de fond.

⥅ [[https://codimd.communecter.org/uploads/upload_c72d3a1788d2e78bc38c117895aebcf4.png]]

Voir sur un video tutoriel

B2 - Choisir la structure de la section.

Sur un section, il y a la liste des structures :

⥅ [[https://codimd.communecter.org/uploads/upload_93f34568c47a09ecc14537eddd49ad57.png]]

• Choisir et cliquer pour obtenir la colonne structuré,
• Remplir les selon vos besoin.

B3 - Effectuer du Copier/coller de bloc en bloc.

• En cas de contenu répétitif,

• Cliquez sur bouton Copier en bas des éléments en question,

  ⥅ [[https://codimd.communecter.org/uploads/upload_c2b44da6392e23de4447391baf263403.png]]

• Allez vers l’endroit où vous voulez le coller,

• Cliquez sur bouton Coller en bas des éléments où vous voulez placer.

Voici une exemple d’une section qui est créée à l’aide des 4 colonnes avec du texte.

⥅ [[https://codimd.communecter.org/uploads/upload_b3f1ce493678664ef5e4c71863940f0d.png]]

Voir sur un video tutoriel

B4 - Comment personnaliser sa section à l’aide d’un texte et d’une image?

Pour commencer :

• Ajouter une section,
• Choisir la structure du section,
• Glisser le texte et l’image vers la colonne. Selon le design que vous voulez,
• Cliquez sur un élément pour ouvrir sa menu de configuration,
• Configurez selon vos besoin.

Voici une exemple d’une section a 2 colonnes qui contien du texte et de titre avec couleur de fond à gauche et une image rond avec du bordure à droite.

⥅ [[https://codimd.communecter.org/uploads/upload_465df9419bd79029606b1531c7a20a94.png]]

Voir sur un video tutoriel

B5 - Ajouter un bouton dans une section

Deux types de boutons le simple et le bouton avec les actions préfigurer (popup) - to describe

IV - Editer un block

A - Sélectionner un bloc a édité

A1 - Via un click sur le bloc en question

• Au survol d’un bloc il aura une bordure en bleu, il faut juste un click pour passer à son édition.

  ⥅ [[https://codimd.communecter.org/uploads/upload_814a5fbc158ca332e6f9528059a69c8f.png]]

A2 - Via un click l’utilisation de la couche des blocs

• Ça se fait en trois étapes : - Cliquer sur le bouton "Ajouter un bloc" pour ouvrir le panel de gauche. - Accéder à l’onglet couche. - Sélectionner le bloc a modifié dans la couche.

⥅ [[https://codimd.communecter.org/uploads/upload_6d3a2940a977e19dd935c17eba4b79ae.png]]

• Vous pouvez aussi appuyer sur la touche "Tab"

  ⥅ [[https://codimd.communecter.org/uploads/upload_522152a5aa2950f55eff1ce90a79bc23.png]]

  pour accéder directement à l’onglet couche

A2 - Le bouton sélectionner un parent aussi permet d’accéder à l’édition du bloc parent.

⥅ [[https://codimd.communecter.org/uploads/upload_c1d08a6809f1ed9de4acc50a49d50139.png]]

B - Le panel d’édition d’un bloc

• Après avoir sélectionné un bloc a édité, le panel de droite va s’ouvrir, elle contient toutes les paramètres existant pour le bloc en question.

  

  ⥅ [[https://codimd.communecter.org/uploads/upload_1a489bf8158aba2c320559549221ddb2.png]]

C - Les options possible pour une bloc

• Après avoir sélectionné un bloc a édité, il y a des manipulations possibles à faire sur un bloc.

⥅ [[https://codimd.communecter.org/uploads/upload_25f070bb985ed20382c95286c47768f9.png]]

⥅ [[https://codimd.communecter.org/uploads/upload_8ea71d242a4b7f0c74d8469cf834f1d3.png]]

- Deplacer vers le haut : Pour déplacer un bloc vers le haut

⥅ [[https://codimd.communecter.org/uploads/upload_b5ce8dfe1d00e6de2380621b0eea135d.png]]

- Deplacer vers le bas : Pour déplacer un bloc vers le bas

⥅ [[https://codimd.communecter.org/uploads/upload_f244747bff72f7bd9546ec9a129bcb8c.png]]

- Éditer : Pour accéder à l’édition du bloc

⥅ [[https://codimd.communecter.org/uploads/upload_c228a5648a3389d20388c54109af5aeb.png]]

- Sélectionner le parent : Pour sélectionner le parent du bloc

⥅ [[https://codimd.communecter.org/uploads/upload_13eaddc276dc5927771dee5ce1ef1828.png]]

- Dupliquer : Pour dupliquer un bloc

⥅ [[https://codimd.communecter.org/uploads/upload_984a0b6df4a2b27fb272e6e2ba9800af.png]]

- Copier : Pour copier un bloc

⥅ [[https://codimd.communecter.org/uploads/upload_defed7075f0464d3c63b390761d6e5f4.png]]

- Coller : Pour dupliquer un bloc copier

⥅ [[https://codimd.communecter.org/uploads/upload_4bdc540aab8a411f138e8ba47325d512.png]]

- Ajouter une section : Pour insérer une nouvelle section en bas de la section

⥅ [[https://codimd.communecter.org/uploads/upload_b7ad915cfe72a4c838a1065584cdeb74.png]]

- Enregistrer : Pour enregistrer une section en tant que blocCms réutilisable

⥅ [[https://codimd.communecter.org/uploads/upload_eddf417ed6dab47eeb93e24f4c6b0268.png]]

- Supprimer : Pour supprimer un bloc

⥅ [[https://codimd.communecter.org/uploads/upload_dd68eb7e4013e6c1a2bcdd186ec30e20.png]]

- Désélectionner : Pour désélectionner un bloc et sortir de son mode édition

V - Responsive Edition

Il est possible d’avoir des configurations responsive pour certains config d’un block Voir sur un video tutoriel

Pour cela il faut :

• Changer de mode de vue et faire les modifications : Pour changer de mode de vue il existe deux façons : - En utilisant le bouton de changement de vue à côté de chaque propriété Css possédant une configuration responsive

  

  ⥅ [[https://codimd.communecter.org/uploads/upload_b4b95aaaa8dd84f248228d1632313e99.png]]

  - Ou en utilisant le bouton en haut

  ⥅ [[https://codimd.communecter.org/uploads/upload_9ab3dd04c5ddf6330e1bc8f1c641cbef.png]]